<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>事件的委派-冒泡实现</title>
</head>
<!--
    我们希望 只绑定一次点击事件，就可以用到多个元素上
    即使是后面添加的元素 也具有点击事件
    因此 就需要到"事件的委托(event.target)"
        * 事件的委托(event.target)——将事件统一绑定给元素的祖先元素
          这样当后代元素的事件触发时，会一直冒泡到祖先元素
        event.target:表示触发对象的事件
-->
<style>
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        background-color: wheat;
        font-size: 30px;
        /*文本透明*/
        /*text-decoration: none;*/
        font-family: "华文楷体";
        display: flex;
        flex-direction: column;
        /*justify-content: center;*/
        align-items: center;
    }

    p {
        font-size: 40px;
        font-weight: bold;
        background-color: white;
        cursor: pointer;
    }

    #box1 > div {
        width: 100px;
        height: 100px;
        background-color: #b3b1af;
        border: solid 1px black;
    }

    button {
        margin-top: 20px;
        font-size: 25px;
        width: 100px;
        height: 35px;
        background-color: #b3b1af;
        border: none;
        border-radius: 10%;
        box-shadow: black 0 0 5px;
        transition: linear 0.2s;
        z-index: 1;
    }
    #btn button{
        background-color: slategrey;
    }

    button:hover {
        background-color: pink;
        transform: scale(1.1);
        color: deeppink;
    }

</style>
<body id="body">
<div id="btn">
    <button class="button">按钮1</button>
    <button class="button">按钮2</button>
    <button class="button">按钮3</button>
    <button class="button">按钮4</button>
</div>
<div id="add">
    <button>添加</button>
</div>
</body>
<script>
    var button = document.getElementsByClassName("button")
    var num_button = document.getElementById("btn")
    var add_button = document.querySelector("#add button")
    //老方法--不能将点击事件绑定到新添加的按钮上
    // for (let i = 0; i < button.length; i++) {
    //     button[i].onclick = function () {
    //         alert("我是" + this.innerHTML)
    //     }
    // }
    //新方法(event.target)--能将点击事件绑定到新添加的按钮上
    num_button.onclick=function (event){
        if (event.target.tagName==='BUTTON'){
            alert("我是" + event.target.innerHTML)
        }
    }
    // 点击添加按钮生成新的按钮
    var x=1
    add_button.onclick = function () {
        let button = document.createElement("button")
        button.innerHTML = "新的"+x
        x++
        num_button.appendChild(button)
    }
</script>
</html>